﻿@extends('wechat.layouts.base')
@section("js_files")
	<script src="{{asset('dist/wechat/js/share_file.js')}}"></script>
    <script>
        var token = "{{ csrf_token() }}";
        var build_id ={{$build->id}};
        </script>
@endsection
@section('content')
    <div class="up">
       <!-- <h4>上传照片</h4>-->
		<!--<img width="100%" src="{{asset('dist/wechat/img/uploadh.jpg')}}">-->
        <article class="zzsc-container">
			<div id="clipArea"></div>
			<div class="upfile">
				<input type="file" id="file" name="pic" draggable="false" single accept="image/jpg,image/jpeg,image/png,image/gif"/>
				上传
			</div>
			<a id="clipBtn" href="javascript:;">确定</a>
			<div id="loadingToast" style="display:none;">
				<div class="weui-mask_transparent"></div>
				<div class="weui-toast">
				<i class="weui-loading weui-icon_toast"></i>
				<p class="weui-toast__content">照片上传中</p>
			</div>
	</div></article>
		<div class="upwords">
			<p>上传微笑照片，寻找与你笑得最像的Ta</p>
			<p>iphone7、华为荣耀7、万达电影票……等你来赢</p>
		</div>
		<label for="weuiAgree" class="weui-agree" style="text-align: center;">
			<input id="weuiAgree" type="checkbox" class="weui-agree__checkbox" checked>
			<span class="weui-agree__text">
				阅读并同意<a id="term" href="javascript:void(0);">《用户使用协议》</a>
			</span>
		</label>
		<div class="weui_dialog_alert" style="display: none;">
			<div class="weui-mask"></div>
			<div class="weui-dialog" style="top:41%;">
				<div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
				<div class="weui-dialog__bd" style="max-height:200px;overflow:scroll;">弹窗内容，告知当前页面信息等</div>
				<div class="weui-dialog__ft">
					<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确定</a>
				</div>
			</div>
		</div>
		
		<script src="{{asset('dist/wechat/js/upload/iscroll-zoom.js')}}"></script>
		<script src="{{asset('dist/wechat/js/upload/hammer.js')}}"></script>
		<script src="{{asset('dist/wechat/js/upload/jquery.photoClip.js')}}"></script>
		<script src="{{asset('dist/wechat/js/upload/exif.js')}}"></script>
		<script>
			//获取照片的元信息（拍摄方向）
			function getPhotoOrientation(img){
				var orient;
				EXIF.getData(img, function () {
					orient = EXIF.getTag(this, 'Orientation');
				});
				return orient;
			}
		</script>
		<script>
		var host =window.location.host;
		$.weui = {};
			$.weui.alert = function(options){
				options = $.extend({title: '提示', text: '警告内容'}, options);
				var $alert = $('.weui_dialog_alert');
				$alert.find('.weui-dialog__title').text(options.title);
				$alert.find('.weui-dialog__bd').html(options.text);
				$alert.on('touchend click', '.weui-dialog__btn', function(){
					$alert.hide();
				});
				$alert.show();
			};
		$("#term").on('click',function(){
				var p = '<p>1、用户在注册账号或使用本系统的过程中，可能需要填写或提交一些必要的信息，如法律法规、规章规范性文件（以下称“法律法规”）规定的需要填写的身份信息。如用户提交的信息不完整或不符合法律法规的规定，则用户可能无法使用本系统或在使用本系统的过程中受到限制。</p><p>2、个人隐私信息是指涉及用户个人身份或个人隐私的信息，比如，用户真实姓名、手机号码、手机设备识别码；</p><p>百万民选系统尊重用户个人隐私信息的私有性，百万民选将采取技术措施和其他必要措施，确保用户个人隐私信息安全，防止在本系统中收集的用户个人隐私信息泄露、毁损或丢失。在发生前述情形或者百万民选系统发现存在发生前述情形的可能时，将及时采取补救措施。</p><p>您在百万民选系统中提供的个人信息包括照片微信昵称，百万民选系统拥有默认授权使用的权力，可将您上传的照片及微信昵称用于非商业性质的传播。</p>';
				$.weui.alert({text: p});
			});
		$(function () {
			$("#clipArea").photoClip({
				width: 320,
				height: 320,
				file: "#file",
				view: "#view",
				ok: "#clipBtn",
				loadStart: function() {
					console.log("照片读取中");
				},
				loadComplete: function() {
					console.log("照片读取完成");
				},
				clipFinish: function(dataURL) {
					$.ajax({
                            type:'POST',
                            url:'http://'+host+'/wechat/upload/uploadImg',
                           // async: false, //锁住浏览器,执行完毕后执行后面的方法
                            data:{
                                base64:dataURL,
                                _token:token,
                                build_id:build_id
                            },
							beforeSend: function () {  
								// 禁用按钮防止重复提交  
								$('#loadingToast').css('display','block'); 
							},  
                            success:function (data) {
                                if(data.success == true){
                                    $(".mrshowpic img").attr("src",data.url);
                                    $("#points").html(data.face.value);
                                    $("#star").html(data.face.star);
                                    $("#build_name").html(data.build.name);
                                    $(".up").css("display","none");
                                    $(".mr").css("display","block");
							    
                                }else if(data.success == false){
                                   //alert(data.msg);
								   $.weui.alert({text: data.msg});
                                }
                            },
							complete:function(){
								$('#loadingToast').css('display','none'); 
							}	
                        });
				}
			});
		});
            </script>
    </div>
    <div class="mr">
		<!--<h4>上传成功</h4>-->
		<!--<img id="tip" onclick="hidepic()" src="{{asset('dist/wechat/img/uploadsuccess2.png')}}">-->
		<div class="mrshowpic">
            <img src=""/>
        </div>
		<div class="info">
			<p>您的笑脸获得<strong id="points">0</strong>分</p>
			<p>为<strong id="build_name">xx</strong>点亮<strong id="star">x</strong>星</p>
			<p>请在个人中心查看与您相似的人</p>
		</div>
        <a class="ok" href="javascript:;">立即抽奖</a>
		<a class="ok" href="javascript:;">我的撞脸</a>
    </div>
	<script>
	function hidepic() {
            $('#tip').css('display','none');
        }
	function yes(){
		window.location.href="{{url('wechat/draw')}}";
	}
	function goface(){
		window.location.href="{{url('wechat/face')}}";
	}
	</script>
    @endsection